<template>
	<view class="store-design">
		<view class="store-design-banner"><image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/09.png" mode="widthFix"></image></view>
		<view class="store-design-form">
			<view class="store-design-input">
				<input placeholder="输入您的称呼" placeholder-class="place" v-model="formData.name" />
			</view>
			<view :class="['store-design-select',{isSelect: formData.city}]" @click="show=!show">
				{{formData.city?formData.city:'选择所在城市'}}
				<u-icon name="arrow-down" color="#B3B3B3" size="24"></u-icon>
			</view>
			<view class="store-design-input">
				<input placeholder="输入房屋面积" placeholder-class="place" v-model="formData.area" />
				<text class="unit">㎡</text>
			</view>
			<view class="store-design-input">
				<input placeholder="输入设计预算" placeholder-class="place" v-model="formData.budget" />
			</view>
		</view>
		<view class="store-design-btn" @click="submit">立即申请</view>
		<view class="store-design-tips">为了您的利益以及我们的口碑，您的隐私将被严格保密！</view>
		<u-picker mode="region" v-model="show" @confirm="confirm"></u-picker>
		<uni-popup type="center" ref="server">
			<pt-server></pt-server>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					type: 3,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					phone: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).phone:'',
					name: '',
					city: '',
					area: '',
					budget: ''
				},
				appid: ''
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.appid = uni.getExtConfigSync().appid
			// #endif
		},
		methods: {
			confirm(e){
				this.formData.city = e.province.label + ',' + e.city.label + ','  + e.area.label
			},
			submit(){
				if(!this.formData.name){
					return uni.showToast({
						icon: 'none',
						title: '请输入您的姓名'
					})
				}else if(!this.formData.city){
					return uni.showToast({
						icon: 'none',
						title: '请选择您的所在城市'
					})
				}else if(!this.formData.area){
					return uni.showToast({
						icon: 'none',
						title: '请输入您的房屋面积'
					})
				}else if(!this.formData.budget){
					return uni.showToast({
						icon: 'none',
						title: '请输入您的设计预算'
					})
				}
				this.$u.api.StoreCustomer(this.formData).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功',
						duration: 1500
					})
					if(this.appid=='wx28af18940b770ea8'){
						this.$refs.server.open()
						this.formData = this.$options.data().formData
						return false
					}
					setTimeout(() => {
						uni.navigateBack({
							animationDuration: 500,
							delta: 1
						})
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.store-design{
		.store-design-banner{
			image{
				width: 100%;
			}
		}
		.store-design-form{
			padding: 60rpx 55rpx 0;
			.store-design-input{
				margin-bottom: 30rpx;
				position: relative;
				.unit{
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 32rpx;
					font-weight: bold;
				}
				input{
					height: 110rpx;
					line-height: 110rpx;
					background: #F7F7F7;
					border-radius: 8rpx;
					padding: 0 30rpx;
					font-size: 32rpx;
				}
				.place{
					color: #B3B3B3;
					font-size: 32rpx;
				}
			}
			.store-design-select{
				height: 110rpx;
				line-height: 110rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				padding: 0 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #B3B3B3;
				font-size: 32rpx;
				&.isSelect{
					color: #141414;
				}
			}
		}
		.store-design-btn{
			background-color: #141414;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFF;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 8rpx;
			margin: 70rpx 55rpx 0;
		}
		.store-design-tips{
			text-align: center;
			color: #909090;
			font-size: 20rpx;
			margin-top: 50rpx;
		}
	}
</style>
